<template>
    <div class="container">
        <a-space direction="vertical" :size="12" fill>
            <a-space direction="vertical" :size="16" fill>
                <div class="space-unit">
                    <PublicOpinion />
                </div>
                <div>
                    <a-row :gutter="20">
                        <a-col :span="16">
                            <ContentPublishRatio />
                        </a-col>
                        <a-col :span="8">
                            <PopularAuthor />
                        </a-col>
                    </a-row>
                </div>
                <div>
                    <ContentPeriodAnalysis />
                </div>
            </a-space>
        </a-space>
    </div>
</template>

<script>
import { defineComponent } from 'vue';
import PublicOpinion from './components/public-opinion.vue';
import ContentPeriodAnalysis from './components/content-period-analysis.vue';
import ContentPublishRatio from './components/content-publish-ratio.vue';
import PopularAuthor from './components/popular-author.vue';

export default defineComponent({
    components: {
        PublicOpinion,
        ContentPeriodAnalysis,
        ContentPublishRatio,
        PopularAuthor,
    },
});
</script>

<style scoped lang="less">
.container {
    margin-bottom: 20px;
    padding: 0 20px 20px 20px;
}

.space-unit {
    background-color: var(--color-bg-2);
    border-radius: 4px;
}

.title-fix {
    margin: 0 0 12px 0;
    font-size: 14px;
}

:deep(.section-titile) {
    margin: 0 0 12px 0;
    font-size: 14px;
}
</style>
